<script setup>
import PageHeader from "@/views/Common/PageHeader.vue";
import NavigationBarStricky from "@/views/Common/NavigationBarSticky.vue";
import NavigationBar from "@/views/Common/NavigationBar.vue";
import http from "@/utils/http.js";
import {ref} from 'vue'
import {useRouter} from "vue-router";

const router=useRouter()

const articleContent = ref({
  title:'',
  content:'',
  contentImg:'',
})

//aid-文章id
const getArticleContent = async (aid) =>{
  try{
    const response = await http.get(`/expert/articleDetail/${router.currentRoute.value.params.aid}`)
    articleContent.value = response.data
    console.log(response)
  }catch (error){
    console.error('获取文章内容失败:',error)
  }
}
getArticleContent();

const formatContent = (content, images) => {
  if (!content) return [];

  // 将内容按段落分割
  const paragraphs = content.split('\n')
    .map(para => para.trim())
    .filter(Boolean);

  // 处理段落和图片
  const formattedContent = [];

  paragraphs.forEach(para => {
    // 添加文字段落
    formattedContent.push({
      type: 'text',
      content: para.replace(/{{image_\d+}}/g, '') // 移除图片标记
    });

    // 检查是否需要插入图片
    const imageMatch = para.match(/{{image_(\d+)}}/);
    if (imageMatch) {
      const imageIndex = parseInt(imageMatch[1]) - 1;
      if (images && images[imageIndex]) {
        formattedContent.push({
          type: 'image',
          url: images[imageIndex]
        });
      }
    }
  });

  return formattedContent;
};

// 添加时间格式化函数
const formatDate = (dateStr) => {
  if (!dateStr) return '';
  const date = new Date(dateStr);
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
}
</script>

<template>
  <div class="article-page">
    <div class="header-white">
      <NavigationBarStricky />
      <PageHeader />
      <navigation-bar></navigation-bar>
    </div>

    <div class="article-info">
      <div class="article-top">
        <div class="article-title">
          <span style="font-size: 30px;font-weight: bold">{{articleContent.title}}</span>
        </div>
        <div class="article-date" style="margin-top: 25px;display: flex;justify-content: space-between">
          <span style="font-size: 15px;font-weight: bold">发布时间:{{formatDate(articleContent.createdDate)}}</span>
          <span style="font-size: 15px;font-weight: bold">来源：91庞先生</span>
          <span style="font-size: 15px;font-weight: bold">阅读量：3919</span>
        </div>
        <div class="article-content">
          <template v-for="(item, index) in formatContent(articleContent.content, articleContent.images)" :key="index">
            <!-- 文字段落 -->
            <p v-if="item.type === 'text'" class="content-paragraph">
              {{ item.content }}
            </p>
            <!-- 图片 -->
            <div v-else-if="item.type === 'image'" class="content-image">
              <img :src="item.url" alt="文章配图" />
            </div>
          </template>
        </div>

      </div>
    </div>

  </div>
</template>

<style scoped lang="less">

.article-page{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: auto;
  min-height: 100vh;
  background-color: #f3f6f8;
}

.article-info{
  padding: 40px;
  height: auto;
  margin-left: 100px;
  margin-right: 100px;
  width: auto;
  background-color: white;
  border-radius: 25px;
  margin-bottom: 40px;
}

.article-content {
  margin-top: 20px;
  line-height: 1.8;

  .content-paragraph {
    margin-bottom: 16px;
    text-indent: 2em;
    font-size: 16px;
    color: #333;
  }

  .content-image {
    margin: 20px 0;
    text-align: center;

    img {
      max-width: 100%;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    }
  }
}

.header-white{
  background-color: #fff;
  width: 100%;
}

</style>